<template>
  <div class="alloc-resource">
    <el-card class="box-card">
      <div
        v-for="item in resourceList"
        :key="item.id"
      >
        <el-row class="tip-line">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-checkbox
                v-model="item.selected"
                :label="item.name"
                @change="handleCheckAllChange($event)"
              ></el-checkbox>
            </div></el-col>
        </el-row>
        <div class="table">
          <el-row>
            <!-- <el-checkbox-group v-model="check"> -->
              <el-col
                :span="8"
                v-for="resource in item.resourceList"
                :key="resource.id">
                <el-checkbox
                  :label="resource.name"
                  v-model="resource.selected"></el-checkbox>
              </el-col>
            <!-- </el-checkbox-group> -->
          </el-row>
        </div>
      </div>
      <!-- 保存与清空按钮 -->
      <div style="text-align:center; margin-top: 20px">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="onClear">清空</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getRoleResources } from '@/services/resource'

// const cityOptions = ['上海', '北京', '广州', '深圳']

export default {
  name: 'AllocResource',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      resourceList: [],
      // 记录被选择
      check: []
    }
  },
  created () {
    // 加载所有资源列表
    // this.loadResouurceList()
    // // 加载资源列表下的所有资源
    // this.loadAllResource()
    // 加载角色已分配资源
    this.loadRoleResource()
  },
  methods: {
    handleCheckedCitiesChange (value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    handleCheckAllChange (e) {
      // this.checkedCities = val ? cityOptions : []
      console.log(e)
    },
    async loadRoleResource () {
      const { data } = await getRoleResources(this.roleId)
      this.resourceList = data.data
      console.log(data.data)
    },
    // 筛选与资源目录对应的资源
    siftResource (arr, id) {
      return arr.filter(item => item.categoryId === id)
    },
    // 保存按钮的事件
    async onSave () {
    },
    // 清空按钮
    onClear () {
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip-line {
    padding: 20px;
    background-color: #f2f6fc;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
  }
  .table {
    padding: 20px;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    .el-col {
      padding: 4px 0;
    }
  }
  .tip-line {
    border-top: 1px solid #dcdfe6;
  }
</style>
